<template>
  <div id="container"  @operation="operation">
        <div id="panelBlock">
        <input type="text" v-model="componentName">
        <button @click="add(componentName)">添加一个组件</button>
        <button @click="view">预览</button>
        <button @click="store">查看store</button>
        <button @click="dyncMount">$mount</button>
        <select id v-model="bgStyle" @change="changeBg" >
          <option value="">背景</option>
          <option value="bg1">bg1</option>
          <option value="bg2">bg2</option>
        </select>
        <div id="echartPanel" :class="bgStyle"  @dragover="dragover($event)" @drop='drop($event,dragName)' :style="`transform: scale(${slideValue});background:${bg.color}`"   @operation="operation">
            <component :is="item" v-for="(item,index) in items" :key="index" :ref="index"></component>
            <div id="mouseBox" >
              <ul >
                <li @click="copyCom">复制</li>
                <li @click="viscidityCom">粘贴</li>
                <li @click="deleteCom">删除</li>
              </ul>
            </div>
        </div>
         <div id="sliderBlock">
            <el-slider v-model="slideValue" :show-tooltip="false"  style="width:300px;" :max="0.7" :min='0.1' :step="0.1" ></el-slider>
        </div>
    </div>
    <div class="attribute">
      <el-tabs type="border-card" v-if="active">
        <el-tab-pane label="样式">
          <echartStyle ref="echartStyle"></echartStyle>
        </el-tab-pane>
        <el-tab-pane label="数据条件">数据条件</el-tab-pane>
      </el-tabs>
      <div v-if="!active">
          <h4>页面设置</h4>
           <el-row>
            <el-col :span='8'><div>背景颜色</div></el-col>
           </el-row>
          <el-row>
            <el-col :span='8'><el-color-picker v-model="bg.color" show-alpha color-format="rgb"></el-color-picker></el-col>
            <el-col :span='14'><el-input type="text" v-model="bg.color" disabled></el-input></el-col>
          </el-row>
          <el-row>
            <el-col :span='8'><div>背景图</div></el-col>
            <el-col :span='14'>
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">点击或拖拽文件到这里</div>
              </el-upload>
            </el-col>
          </el-row>
      </div>
    </div>
    <div class="componentLibrary">
       <el-collapse v-model="activeNames">
        <el-collapse-item title="通用组件" name="1">
         <el-row>
          <el-col :span="6"><div class="comm-content1 draggable" @dragstart="dragstart('texta')">文字</div></el-col>
          <el-col :span="6"><div class="comm-content2 draggable" @dragstart="dragstart('pic')">图片</div></el-col>
          <el-col :span="6"><div class="comm-content3 draggable">时间器</div></el-col>
          <el-col :span="6"><div class="comm-content4 draggable">矩形</div></el-col>
        </el-row>
        </el-collapse-item>
        <el-collapse-item title="趋势预测" name="2">
        <el-row>
          <el-col :span="6"><div class="forecast-content1 draggable" draggable='true' @dragstart="dragstart('echart')" @click="add('echart')"></div></el-col>
          <el-col :span="6"><div class="forecast-content2 draggable" draggable='true' @dragstart="dragstart('scatter')"  @click="add('scatter')"></div></el-col>
          <el-col :span="6"><div class="forecast-content3 draggable"></div></el-col>
          <el-col :span="6"><div class="forecast-content4 draggable"></div></el-col>
        </el-row>
        </el-collapse-item>
        <el-collapse-item title="相关分析" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </el-collapse-item>
        <el-collapse-item title="波动分析" name="4">
          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    
  </div>
</template>

<script>
import Vue from 'vue'
import VueRulerTool from "./vue-ruler-tool.vue";
import texta from "./edit/textarea.vue";
import pic from "./edit/picture.vue";
import echart from "./edit/echart.vue";
import scatter from "./edit/scatter.vue";
import store from "@/vuex/store.js";
import echartStyle from "./attributeStype/echartStyle.vue";

// A:@dragstart="dragstart($event)" @dragend="dragend($event)"
// B:@dragleave="dragleave($event)" @dragover="dragover($event)" @drop='drop($event)'

export default {
  name: "HelloWorld",
  data() {
    return {
      bg:{},
      slideValue:0.7,
      dragName:'',
      activeNames: ['1','2','3','4'],
      items: [],
      dataItems: [],
      currentItem: {},
      bgStyle: "",
      componentName: "echart"
    };
  },
  components: {
    echart,
    scatter,
    texta,
    pic,
    VueRulerTool,
    echartStyle
  },
  created() {
    var _this = this;
    document.onkeydown = function(e) {
      let key = e.keyCode;
      if (e.ctrlKey) {
        if (key == 86) {
          _this.copyItem();
        }
      }
      if (key == 46) {
        _this.deleteItem();
      } else if (key === 16) {
        _this.currentItem.lockSize = true;
      }
    };
    document.onkeyup = function(e) {
      let key = e.keyCode;
      if (key === 16) {
        _this.currentItem.lockSize = false;
      }
    };

   
   
  },
  mounted() {
    this.items = [];
    this.dataItems = [];

    document.getElementById("echartPanel").oncontextmenu = function(e){
    　　return false;
    }

    // document.getElementById("echartPanel").onclick = ((e)=>{
    //     var target=$(e.target);
    //     console.log(target)
    //     console.log(target.is(`#(${this.currentItem.type})`))
      //  if(target.is('#echartPanel')){
      //    store.state.active = true;
      //    console.log(store.state.active)
      //  }else{
      //    store.state.active = false;
      //    console.log(store.state.active)

      //  }
    // })

   
  },
  computed:{
    active(){
      return store.state.active;
    }
  },
  methods: {
    /* 添加组件 */
    add(name) {
      this.items.push(name);
      this.$nextTick(() => {
        store.state.items.push(this.$refs[this.items.length - 1][0].item);
      });
    },
    /* store */
    store() {
      console.log("store", store.state.items);
    },
    /* 预览模板 */
    view() {
      sessionStorage.setItem("echartData", JSON.stringify(store.state.items));
      let routeData = this.$router.resolve({ path: "/showPanel" });
      window.open(routeData.href, "_blank");
    },
    /**获取当前Item */
    getCurrentItem(item) {
      this.currentItem = item;
      // this.$refs.echartStyle.getStyleList(item);
    },

    /**
     * 粘贴当前Item
     */
    copyItem() {
      this.items.push(this.currentItem.type);
      this.$nextTick(() => {
        this.$refs[this.items.length - 1][0].item.settings.size = {
          width: this.currentItem.settings.size.width,
          height: this.currentItem.settings.size.height
        };
        this.$refs[
          this.items.length - 1
        ][0].item.settings.options = this.currentItem.settings.options;
        store.state.items.push(this.$refs[this.items.length - 1][0].item);
      });
    },
    /**
     * 删除当前Item
     */
    deleteItem() {
      $(".activeClass").remove();
      store.state.items.splice(store.state.items.indexOf(this.currentItem), 1);
    },
    render: function(h) {
      this.allComponents.map(function(componentName) {
        return h(componentName);
      });
    },
    changeBg() {
      sessionStorage.setItem("bg", this.bgStyle);
    },
    dyncMount() {
      var Profile = Vue.extend(echart);
      // 创建 Profile 实例，并挂载到一个元素上。
      $("#echartPanel").append(new Profile().$mount().$el);
    },
    dragstart(name) {
       console.log("dragName",this.dragName)
      this.dragName=name;
    },
    drop(e,name) {
      console.log("name",name)
        this.items.push(name);
        this.$nextTick(() => {
        store.state.items.push(this.$refs[this.items.length - 1][0].item);
        });
    },
    dragover(e) {
       e.preventDefault();
    },
    copyCom(){
      alert('复制')
      document.getElementById('mouseBox').style.display = 'none'; 
    },
    viscidityCom(){
       alert('粘贴')
       document.getElementById('mouseBox').style.display = 'none'; 
    },
    deleteCom(){
       alert('删除')
       document.getElementById('mouseBox').style.display = 'none'; 
    },
    operation(){
        alert('测试')
       document.getElementById('mouseBox').style.display = 'none'; 
    },
  }
};
</script>
<style>
.el-upload-dragger{
  width:100%!important;
}
</style>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  position: relative;
}
#echartPanel {
  width: 100vw;
  height: 100vh;
  transform: scale(0.7);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: -13vw;
  background-image: linear-gradient(-173deg, #00204C 0%, #000000 100%);
  box-shadow: 0 0 4px 0 #000000;
}
#panelBlock {
  width: 73vw;
  height: 100vh;
  background:#ddd;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 14vw;
  background: url(https://img.alicdn.com/tfs/TB184VLcPfguuRjSspkXXXchpXa-14-14.png) repeat;
  user-select: none;
}
.attribute {
  border-left: 1px solid #ddd;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 13vw;
  height: 100vh;
}
.componentLibrary {
  border-right: 1px solid #ddd;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 14vw;
  height: 100vh;
}
.forecast-content1{
  width:50px;
  height:50px;
  background:url('../assets/echart.jpg') no-repeat;
  background-size:100% 100%;
  cursor: pointer;
}
.forecast-content2{
  width:50px;
  height:50px;
  background:url('../assets/scatter.jpg') no-repeat;
  background-size:100% 100%;
  cursor: move;
}
#sliderBlock{
  position: absolute;
  bottom:10px;
  right:100px;
}
.demonstration{
  width:100px;
}
#mouseBox{
  position: absolute;
  display: none;
  background:#fff;
  border:1px solid #000;
  z-index: 999;
}
ul,li{
  list-style-type: none;
  margin:0;
  padding:0;
}
#mouseBox li{
  padding:10px;
  cursor: pointer;
}
#mouseBox li:hover{
  background:#ddd;
}

</style>